<!--  -->
<template>
  <div class="coupon">
      <!-- <HeaderTop title="我的优惠券"></HeaderTop> -->
      <div class="coupon_header">
          <div class="coupon_title">
              <p class="title1" :class="{on:!couponUsed}" @click="couponUsed=false">未使用</p>
              <p class="title2" :class="{on:couponUsed}" @click="couponUsed=true">已过期</p>
          </div>
      </div>
      <div class="coupon_mian">
          <!-- 已使用 -->
          <ul class="coupon_mian_ul" :class="{on:couponUsed}" v-if="usedCoupon.length">
              <li class="coupon_mian_li" v-for="(coupon,index) in usedCoupon" :key="index">
                  <div class="top">
                      <div class="top_left">
                          <p>￥<span>{{coupon.deductionMoney}}</span></p>
                      </div>
                      <div class="top_mian">
                          <h3>优惠券</h3>
                          <p>满{{coupon.minConsume}}元使用</p>
                      </div>
                      <div class="top_right">
                          <button class="gray">立即使用</button>
                      </div>
                  </div>
                  <div class="bottom">
                      <p>使用时间：<span>{{coupon.startTime}}-{{coupon.endTime}}</span></p>
                  </div>
              </li>
          </ul>
          <!-- 未使用 -->
          <ul class="coupon_mian_ul" :class="{on:!couponUsed}" v-if="unusedCoupon.length">
              <li class="coupon_mian_li" v-for="(coupon,index) in unusedCoupon" :key="index">
                  <div class="top">
                      <div class="top_left">
                          <p>￥<span>{{coupon.deductionMoney}}</span></p>
                      </div>
                      <div class="top_mian">
                          <h3>优惠券</h3>
                          <p :class="{'red': $route.query.subPrice < coupon.minConsume}">满{{coupon.minConsume}}元使用</p>
                      </div>
                      <div class="top_right" v-if="$route.query.isOrder === 1 && $route.query.subPrice >= coupon.minConsume">
                          <button class="green" @click="goBack(coupon)">立即使用</button>
                      </div>
                      <div class="top_right" v-if="$route.query.isOrder !== 1">
                          <button class="green" @click="gotoPage('/msite')">立即使用</button>
                      </div>
                  </div>
                  <div class="bottom">
                      <p>使用时间：<span>{{coupon.startTime}}-{{coupon.endTime}}</span></p>
                  </div>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
import {mapActions} from 'vuex'

export default {
    data () {
        return {
            couponUsed:false
        };
    },
    created () {
        console.log(this.$route.query.isOrder)
    },
        
    // components: {
    //     HeaderTop
    // },
    mounted(){
        let userId = this.userInfo.userInfo.id
        let token = this.userInfo.token
        this.getMyCouponList({userId,token,code:1}) //获取未使用优惠券
        this.getMyCouponList({userId,token,code:2}) //获取已过期优惠券
    },
    computed: {
        ...mapState(['userInfo','unusedCoupon','usedCoupon']),
    },

    methods: {
        ...mapActions(['getMyCouponList']),
        gotoPage(path){
            console.log(111)
            this.$router.replace(path)
        },
        goBack (item) {
            console.log(item)
            // return 
            this.$router.replace({
                path: '/confirmorder',
                query: {
                    couponId: item.id,
                    minConsume: item.minConsume,
                    deductionMoney: item.deductionMoney,
                }
            })
        }
    }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.red
    color red
.coupon
    // margin-top 45px
    padding-bottom 0 !important
    width 100%
    height 100%
    background #fff
    .coupon_header
        top-border-1px(#e4e4e4)
        display flex
        justify-content center
        padding-top 20px
        .coupon_title
            display flex
            // justify-content space-around
            font-size 12px
            height 37px
            line-height 37px
            width 140px
            border 1px solid #DCDCDC
            border-radius 5px
            overflow hidden
            p
                width 70px
                text-align center
                &.on
                    color #fff
                    background #145B3E
                &.title1
                    border-right 1px solid #DCDCDC
    .coupon_mian
        width 100%
        .coupon_mian_ul
            display none
            width 100%
            &.on
                display flex
                flex-direction column
                align-items center
            
            .coupon_mian_li
                margin-top 20px
                background-image url(./img/bj1.png)
                background-size 100% 100%
                background-repeat no-repeat
                height 128px
                width 85%
                // border 1px solid #868585
                // border-radius 5px
                .top
                    height 93px
                    display flex
                    justify-content space-around
                    align-items center
                    // border 1px solid #868585
                    // border-radius 5px
                    // border-bottom-style dotted
                    // border-
                    .top_left
                        font-size 14px
                        p
                            font-weight bold
                            span 
                                font-weight bold
                                font-size 40px
                    .top_mian
                        margin-left -8%
                        font-size 14px
                        p
                            font-size 12px
                            margin-top 10px
                    .top_right
                        button 
                            margin 0
                            padding 0
                            border 1px solid transparent
                            outline none 
                            color #fff
                            width 100px
                            height 36px
                            border-radius 5px
                        &.gray
                            background #868585
                        .green
                            background #145B3E
                .bottom
                    height 35px
                    line-height 35px
                    p
                        font-size 12px
                        text-align center
</style>